<!--
 * @Descripttion: 分包单位-建花名册
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-12-21 10:16:54
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-24 14:30:13
-->
<template>
  <!-- 企业花名册 -->
  <div class="container">
    <!-- 顶部模块 -->
    <el-row class="topSection">
      <el-row class="topBox">
        <div>
          <el-select
            :disabled="disabled"
            v-model="projectId"
            value-key="projectId"
            filterable
            placeholder="暂无关联项目"
            @change="changeProject"
          >
            <el-option
              v-for="(item, index) of projectList"
              :key="index"
              :label="item.name"
              :value="item.code"
              :title="item.name"
            ></el-option>
          </el-select>
        </div>
      </el-row>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="tabs employeeTabs"
      >
        <el-tab-pane :disabled="disabled" label="项目工人名册" name="employee">
          <projectEmployeeList
            backPath="/home/employee/projectEmployeeFb"
            oldUrl="/home/employee/projectEmployeeFb"
            :showHistory="true"
            :isFB="isFB"
            @func="getmsg($event)"
            v-if="
              showEmployeeList &&
              projectId &&
              (isMini !== 1 || miniRule.isRegister === 1)
            "
            :projectId="projectId"
            :projectName="projectName"
            :currentPage="currentPage"
            ref="employeeList"
            :fromType="fromType"
          ></projectEmployeeList>
          <attach-record
            backPath="/home/employee/projectEmployeeFb"
            oldUrl="/home/employee/projectEmployeeFb"
            :showHistory="true"
            :isFB="isFB"
            v-if="
              showEmployeeList &&
              projectId &&
              isMini === 1 &&
              miniRule.isRegister === 0
            "
            :projectId="projectId"
            :projectName="projectName"
            :currentPage="currentPage"
            :fromType="fromType"
          ></attach-record>
        </el-tab-pane>
        <el-tab-pane :disabled="disabled" label="班组管理" name="group">
          <constructGroup
            v-if="showGroupManage && projectId"
            :projectItem="projectItem"
            :isFB="isFB"
          ></constructGroup>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import projectEmployeeList from '@/components/employee/projectEmployeeList'
import constructGroup from '@/components/employee/constructGroup'
import attachRecord from '@/components/smallProjectManage/attachRecord'

export default {
  name: 'projectEmployeeFb',
  components: {
    projectEmployeeList,
    constructGroup,
    attachRecord,
  },
  data() {
    return {
      isMini: 0,
      miniRule: {},
      projectId: '',
      projectName: '',
      currentPage: '',
      // state: "STARTED", //项目状态code
      // stateName: "", //项目状态
      showEmployeeList: true,
      isFB: true,
      showGroupManage: false,
      showCompany: false,
      activeName: 'employee',
      projectList: [], //项目名称列表
      projectItem: '',
      disabled: false, //有引导页高亮时禁止点击
      fromType: 'projectEmployeeQY',
    }
  },
  async created() {
    //有引导页高亮时禁止点击
    // if(localStorage.getItem("isFirstUseEmployee") != "false") {
    //     this.disabled = true;
    // }
    this.$store.state.activeMenu = '/home/employee/projectEmployeeQY'
    this.activeName = this.$route.query.activeName
      ? this.$route.query.activeName
      : 'employee'
    this.currentPage = this.$route.query.currentPage
    //获取项目列表
    await this.getProjectList()
    this.getMiniRule()
  },
  mounted() {},
  methods: {
    //获取小项目规则
    getMiniRule() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isMini = 1
            this.miniRule = res.data.result || {}
          } else {
            this.isMini = 0
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    //子路由引导页完成禁用清空
    getmsg(data) {
      this.disabled = data
    },
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.label == '项目工人名册') {
        this.showEmployeeList = true
      } else if (tab.label == '班组管理') {
        this.showGroupManage = true
      } else if (tab.label == '参建单位') {
        this.showCompany = true
      }
      // 切换时页面刷新
      this.showEmployeeList = false
      this.$nextTick(function () {
        this.showEmployeeList = true
      })
      this.showGroupManage = false
      this.$nextTick(function () {
        this.showGroupManage = true
      })
    },
    changeProject(val) {
      //解决从其他页面跳转过来后切换项目，uscc下拉框的值变为id的bug
      if (this.$route.query.uscc) {
        this.$route.query.uscc = ''
      }
      if (this.$route.query.groupId) {
        this.$route.query.groupId = ''
      }
      if (this.$route.query.isOnTheJob) {
        this.$route.query.isOnTheJob = ''
      }
      this.projectId = val
      this.showEmployeeList = false
      this.$nextTick(function () {
        this.showEmployeeList = true
        this.$refs.employeeList.clearValue()
      })
      let obj = {}
      obj = this.projectList.find((item) => {
        return item.code === val
      })
      this.projectItem = obj
      this.projectName = this.projectItem.name
      this.showGroupManage = false
      this.$nextTick(function () {
        this.showGroupManage = true
      })
      this.showCompany = false
      this.$nextTick(function () {
        this.showCompany = true
      })
    },
    //获取项目列表
    getProjectList() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.length === 0) {
                this.$alert('您还未加入项目请前往项目申请页面申报项目', '', {
                  confirmButtonText: '确定',
                  showClose: false,
                  confirmButtonClass: 'messageButColor',
                  callback: (action) => {
                    this.$router.push({
                      path: '/home/project/projectDeclareList',
                      name: 'projectDeclareList',
                      query: {
                        type: 'projectDeclareList',
                      },
                    })
                    this.$store.commit('CHANGE_SLIDER_NAME', {
                      oldUrl: '/home/project/projectDeclareList',
                      newUrl: this.$router.currentRoute.fullPath,
                    })
                  },
                })
              } else {
                this.projectList = response.data.result
                //从其他页面返回保证选中跳转之前的项目id
                if (this.$route.query.projectId) {
                  this.projectId = this.$route.query.projectId
                  this.projectList.map((item, index) => {
                    if (item.code === this.projectId) {
                      this.projectName = item.name
                    }
                  })
                } else {
                  this.projectId = response.data.result[0].code
                  this.projectName = response.data.result[0].name
                }

                let obj = {}
                var projectId = this.projectId
                obj = this.projectList.find((item) => {
                  return item.code === this.projectId
                })
                this.projectItem = obj

                this.showEmployeeList = false
                this.$nextTick(function () {
                  this.showEmployeeList = true
                })
              }
            } else {
              this.$message.error('项目数据获取失败')
            }
          },
          (res) => {
            this.$message.error('项目数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('项目数据获取失败')
        })
    },
    //是否隐藏花名册引导页
    // skipStep(){
    //     this.index ++ ;
    //     if(this.index > 5){
    //         localStorage.setItem("isFirstUseEmployee",false);
    //         this.isShowShade = false;
    //         return;
    //     }
    //     this.src= this.srcList[this.index];
    // },
  },
}
</script>
<style scoped lang="less">
.container {
  // top: 130px;
  // padding: 0;
  .topSection {
    // height: 78px;
    background: #e4ebf1;
    border-radius: 4px 4px 0 0;
    padding-top: 24px;
    .topBox {
      .projectState {
        display: inline-block;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        margin-left: 10px;
        font-weight: normal;
        margin-top: 5px;
      }
      /deep/.el-input__inner {
        width: 346px;
        font-size: 24px;
        font-weight: bold;
        color: #333333;
        border: none;
        height: 30px;
        background: #e4ebf1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /deep/.el-select__caret {
        color: #333;
        font-size: 20px;
        line-height: 30px;
      }
    }
    /deep/.tabs {
      margin-top: 21px;
    }
    /deep/.is-active {
      background: #fff;
    }
  }
  // 没有项目时的指引
  .shade {
    position: fixed;
    background: #eee;
    top: 63px;
    left: 230px;
    right: 0;
    bottom: 0;
    z-index: 10000;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
  .tabs {
    /deep/ .el-tabs__content {
      background: #fff;
      // min-height: 800px;
      // padding: 24px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
    /deep/ .el-tabs__nav-scroll {
      overflow: hidden;
      background: #e4ebf1;
      /* margin-top: 10px; */
      padding: 0 24px 1px;
    }
    /deep/ .el-tabs__item.is-active {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    /deep/ .el-tabs__item {
      color: #333;
      background: #d5e0e9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-weight: 400;
    }
    /deep/ .el-tabs__item {
      margin-right: 4px;
      &:nth-last-of-type(1) {
        margin-right: 0;
      }
    }
  }
  //第一次进入花名册页面加引导页
  .guideBox {
    position: fixed;
    background: #eee;
    top: 105px;
    left: 230px;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #f5f7fa;
    div {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      overflow-y: auto;
      img {
        width: 100%;
        //    height: 100%;
      }
    }
  }
}
</style>
